<!-- #layout name=default -->
<div id="main" class="fixed">
    <div class="page-header">
        <!-- ko if: isNewStyle -->
        <h1 class="title pull-left" data-bind="visible: isNewStyle, text: Kooboo.text.common.Style+': '"></h1>
        <button data-bind="visible: isNewStyle, click: formatCode" type="button" class="btn btn-default pull-right">Format code</button>
        <div class="col-md-3" data-bind="visible: isNewStyle">
            <div class="row form-group">
                <div class="input-group" data-bind="error: name">
                    <input data-bind="value: name" type="text" placeholder="Name" class="form-control">
                    <span class="input-group-addon dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <!-- ko text: '.' + extension() -->
                                <!-- /ko -->
                                <i class="fa fa-angle-down"></i>
                            </a>
                            <ul class="dropdown-menu" data-bind="foreach: supportExtensions">
                                <li><a href="javascript:;" data-bind="click: $parent.changeExtension.bind(this), text: $data.displayName"></a></li>
                            </ul>
                    </span>
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: isNewStyle -->
        <h1 class="title pull-left">Style<span>:</span>
            <strong data-bind="text: name, attr:{ title: name }"></strong>
        </h1>
        <button data-bind="visible: !isNewStyle(), click: formatCode" type="button" class="btn btn-default pull-right">Format code</button>
        <!-- /ko -->
    </div>
    <div class="block-fullpage with-buttons">
        <div class="block-visual-editor default">
            <textarea data-bind="codeMirror: {
                mode: 'css',
                value: styleContent,
            }"></textarea>
        </div>
    </div>
    <div class="page-buttons">
        <div class="btn-group dropup">
            <button data-bind="click: onSaveAndReturn" class="btn green" style="margin:0;">Save & Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;"><i class="fa fa-angle-up"></i></a>
            <ul class="dropdown-menu" role="menu">
                <li><a data-bind="click: onSave" href="javascript:;">Save</a></li>
            </ul>
        </div>
        <a data-bind="click: userCancel" class="btn gray">Cancel</a>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/lib/codemirror/mode/css/css.js",
            "/_Admin/Scripts/lib/js-beautify/lib/beautify-css.js",
            "/_Admin/Scripts/kobindings.codemirror.js"
        ])
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css"
        ])
    })()
</script>
<script src="/_Admin/View/Development/Style.js"></script>